import React, {useEffect, useState,memo} from 'react';
import {List, Avatar} from 'antd';
import {
    DownCircleOutlined,
    MessageOutlined,
} from '@ant-design/icons';
import style from './index.module.css'
import {get} from "../../utils/get";
import ReplyList from "../replyList";
import CommentModal from '../commentModal';

const CommentList = (props) => {
    const [isShow,changeIsShow] = useState(false);
    const [showReplyList,setShowReplyList]=useState(false);
    const [list,changeList]=useState([]);
    const [whichTweet,changeTweet]=useState("");//当前选择哪条推文回复/评论
    const [page,changePage] =useState(1);
    const [total,setTotal] = useState(0);
    const [reply,setReply]=useState(0)
    const token = localStorage.getItem('TOKEN')
    useEffect(()=>{
        get(`/share/${props.shareId}/comments?page=${page}&limit=6`).then(res=>{
            if(res.data.code===0)
            {
                const{totalCount,list}=res.data.page;
                changeList(list)
                setTotal(totalCount)
            }
        })
        //isShow会使这个组件多次调用
    },[props,page,isShow])
    //展示时间
    const myTime=(time)=>{
        return time?.substring(0,10)+" "+time?.substring(11,19);
    }
    return(
        <div>
                <List className={`${style.body}`}
                      bordered={true}
                      size ="small"
                      pagination={{
                          pageSize: 6,
                          total:total,
                          onChange:(page)=>{
                              changePage(page);
                          }
                      }}
                      dataSource={list}
                      renderItem={item => {
                          const{content,commentId,nickname,avatar,createTime,reply} =item
                          return(
                              <List.Item className={`${style.bodyItem}`}
                                         key={commentId}
                              >
                                  <List.Item.Meta className={`${style.meta}`}
                                                  avatar={<Avatar src={avatar} />}
                                                  title={<a>{nickname}</a>}
                                  />
                                  <p className={style.time}>{myTime(createTime)}</p>
                                  <MessageOutlined onClick={()=>{if(!token) return;changeTweet(commentId);changeIsShow(true)}}/>
                                  <div className={style.content}>
                                      {content}
                                  </div>
                                  <div className={style.reply} >
                                      {
                                          reply.map(item=>{
                                              return(
                                                  <div className={style.replyItem} key={item.replyId}>
                                                      <div className={style.replyContent}>
                                                              <span>{item.nickname}:</span><span>{item.content}</span>
                                                      </div>
                                                      <div className={style.replyTime}>
                                                          {item.createTime}
                                                      </div>
                                                  </div>
                                              )
                                          })
                                      }
                                      {
                                          item.total>0?<div className={style.replyTips} onClick={()=>{setReply(commentId);setShowReplyList(true)}}><DownCircleOutlined /> 共{item.total}条回复</div>:''
                                      }
                                  </div>
                              </List.Item>
                          )}
                      }
                />
            <ReplyList show={showReplyList} commentId={reply} changeShow={(show)=>setShowReplyList(show)}></ReplyList>
            <CommentModal show={isShow} type={1} msgId={whichTweet} changeShow={(value)=>changeIsShow(value)}/>
        </div>
    );
}

export default memo(CommentList);
